<template>
	<view class="goods-list-container">
		<view class="goods-item" v-for="(item, index) in goodsList" :key="item.id || index" @click="handleGoodsClick(item)">
			<!-- 商品图片 -->
			<view class="goods-image-section">
				<image class="goods-image" :src="item.image" mode="aspectFill" lazy-load="true"></image>
				<!-- 商品标签 -->
				<view class="goods-badges" v-if="item.badges && item.badges.length">
					<view class="badge" v-for="badge in item.badges" :key="badge.type" :class="'badge-' + badge.type">
						{{ badge.text }}
					</view>
				</view>
				<!-- 库存提示 -->
				<view class="stock-overlay" v-if="item.stock !== undefined && item.stock <= 10">
					<text class="stock-text">仅剩{{ item.stock }}件</text>
				</view>
			</view>
			
			<!-- 商品信息 -->
			<view class="goods-info-section">
				<!-- 商品标题 -->
				<view class="goods-title">{{ item.name }}</view>
				
				<!-- 商品标签 -->
				<view class="goods-labels" v-if="item.labels && item.labels.length">
					<view class="label" v-for="label in item.labels" :key="label.type" :class="'label-' + label.type">
						{{ label.text }}
					</view>
				</view>
				
				<!-- 商品描述 -->
				<view class="goods-desc" v-if="item.description">{{ item.description }}</view>
				
				<!-- 价格信息 -->
				<view class="goods-price-section">
					<view class="price-main">
						<JPrice
							:price="item.price"
							:originalPrice="item.originalPrice"
							priceColor="#fa436a"
							originalPriceColor="#999"
							integerSize="32rpx"
							decimalSize="20rpx"
							symbolSize="20rpx"
						/>
					</view>
					<view class="price-unit" v-if="item.weight">
						<JWeightPrice
							:price="item.price"
							:weight="item.weight"
							weightColor="#666"
							unitPriceColor="#fa436a"
							textSize="22rpx"
							backgroundColor="transparent"
							padding="0"
							borderRadius="0"
						/>
					</view>
				</view>
				
				<!-- 销量和店铺信息 -->
				<view class="goods-meta">
					<view class="sales-info">
						<JSalesCount :sales="item.sales" textColor="#999" textSize="22rpx" fontWeight="400" />
					</view>
					<view class="shop-info" v-if="item.shopName">
						<JShopInfo
							:shopName="item.shopName"
							:shopLink="item.shopLink"
							backgroundColor="transparent"
							margin=""
							iconColor="#666"
							iconSize="20rpx"
							shopNameColor="#666"
							shopNameSize="22rpx"
							shopNameWeight="400"
							clickableColor="#246ef9"
							@shopClick="handleShopClick"
						/>
					</view>
				</view>
				
				<!-- 操作按钮 -->
				<view class="goods-actions">
					<view class="action-left">
						<view class="quantity-info" v-if="item.minQuantity">
							<text class="quantity-text">起订{{ item.minQuantity }}{{ item.unit || '件' }}</text>
						</view>
					</view>
					<view class="action-right">
						<JCartButton 
							:goodsItem="item" 
							@success="handleAddToCartSuccess" 
							@error="handleAddToCartError"
							:size="'small'"
						/>
					</view>
				</view>
			</view>
		</view>
		
		<!-- 加载更多 -->
		<view class="load-more" v-if="hasMore && !loading">
			<view class="load-more-btn" @click="loadMore">
				<text>加载更多</text>
			</view>
		</view>
		
		<!-- 加载中 -->
		<view class="loading" v-if="loading">
			<text>加载中...</text>
		</view>
		
		<!-- 没有更多数据 -->
		<view class="no-more" v-if="!hasMore && goodsList.length > 0">
			<text>没有更多商品了</text>
		</view>
	</view>
</template>

<script>
export default {
	name: 'JGoodsList',
	props: {
		goodsList: {
			type: Array,
			default: () => []
		},
		hasMore: {
			type: Boolean,
			default: true
		},
		loading: {
			type: Boolean,
			default: false
		}
	},
	methods: {
		// 商品点击
		handleGoodsClick(item) {
			console.log('查看商品详情:', item);
			this.$emit('goodsClick', item);
		},
		
		// 店铺点击
		handleShopClick(shopInfo) {
			console.log('跳转到店铺:', shopInfo);
			this.$emit('shopClick', shopInfo);
		},
		
		// 添加到购物车成功
		handleAddToCartSuccess(item) {
			console.log('商品已添加到购物车:', item);
			this.$emit('addToCartSuccess', item);
		},
		
		// 添加到购物车失败
		handleAddToCartError(error) {
			console.error('添加购物车失败:', error);
			this.$emit('addToCartError', error);
		},
		
		// 加载更多
		loadMore() {
			if (this.loading) return;
			this.$emit('loadMore');
		}
	}
};
</script>

<style lang="less">
.goods-list-container {
	width: 100%;
	padding: 20rpx;
	.goods-item {
		display: flex;
		width: 100%;
		background: #fff;
		transition: all 0.3s ease;
		
		&:active {}
		
		// 商品图片区域
		.goods-image-section {
			position: relative;
			width: 200rpx;
			height: 200rpx;
			flex-shrink: 0;
			margin-right: 20rpx;
			border-radius: 12rpx;
			overflow: hidden;
			
			.goods-image {
				width: 100%;
				height: 100%;
				object-fit: cover;
			}
			
			// 商品标签
			.goods-badges {
				position: absolute;
				top: 8rpx;
				left: 8rpx;
				display: flex;
				flex-direction: column;
				gap: 6rpx;
				
				.badge {
					padding: 4rpx 8rpx;
					border-radius: 8rpx;
					font-size: 20rpx;
					font-weight: 600;
					color: #fff;
					line-height: 1;
					
					&.badge-hot {
						background: linear-gradient(135deg, #ff6b35, #f7931e);
					}
					
					&.badge-new {
						background: linear-gradient(135deg, #52c41a, #73d13d);
					}
					
					&.badge-sale {
						background: linear-gradient(135deg, #ff4d4f, #ff7875);
					}
					
					&.badge-limit {
						background: linear-gradient(135deg, #722ed1, #9254de);
					}
				}
			}
			
			// 库存提示
			.stock-overlay {
				position: absolute;
				bottom: 0;
				left: 0;
				right: 0;
				background: rgba(36, 110, 249, 0.8);
				text-align: center;
				padding: 6rpx 0;
				
				.stock-text {
					color: #fff;
					font-size: 20rpx;
					font-weight: 500;
				}
			}
		}
		
		// 商品信息区域
		.goods-info-section {
			flex: 1;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			min-height: 200rpx;
			
			.goods-title {
				font-size: 28rpx;
				color: #333;
				line-height: 1.4;
				font-weight: 500;
				margin-bottom: 8rpx;
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 2;
				line-clamp: 2;
				overflow: hidden;
			}
			
			.goods-labels {
				display: flex;
				flex-wrap: wrap;
				gap: 6rpx;
				margin-bottom: 8rpx;
				
				.label {
					font-size: 20rpx;
					padding: 4rpx 8rpx;
					border-radius: 6rpx;
					font-weight: 500;
					line-height: 1;
					
					&.label-limit {
						background: #fff2e8;
						color: #ff6b35;
						border: 1rpx solid #ff6b35;
					}
					
					&.label-min {
						background: #e8f4fd;
						color: #246ef9;
						border: 1rpx solid #246ef9;
					}
					
					&.label-multiple {
						background: #f0f9ff;
						color: #0ea5e9;
						border: 1rpx solid #0ea5e9;
					}
					
					&.label-special {
						background: #fef3c7;
						color: #f59e0b;
						border: 1rpx solid #f59e0b;
					}
					
					&.label-discount {
						background: #fce7f3;
						color: #ec4899;
						border: 1rpx solid #ec4899;
					}
				}
			}
			
			.goods-desc {
				font-size: 24rpx;
				color: #666;
				line-height: 1.4;
				margin-bottom: 12rpx;
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 1;
				line-clamp: 1;
				overflow: hidden;
			}
			
			.goods-price-section {
				margin-bottom: 12rpx;
				
				.price-main {
					margin-bottom: 6rpx;
				}
				
				.price-unit {
					// 净重价格样式
				}
			}
			
			.goods-meta {
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-bottom: 12rpx;
				
				.sales-info {
					flex: 1;
				}
				
				.shop-info {
					flex-shrink: 0;
				}
			}
			
			.goods-actions {
				display: flex;
				justify-content: space-between;
				align-items: center;
				
				.action-left {
					flex: 1;
					
					.quantity-info {
						.quantity-text {
							font-size: 22rpx;
							color: #999;
						}
					}
				}
				
				.action-right {
					flex-shrink: 0;
				}
			}
		}
	}
	
	// 加载更多
	.load-more {
		text-align: center;
		padding: 40rpx 0;
		
		.load-more-btn {
			display: inline-block;
			padding: 20rpx 40rpx;
			background: #fff;
			border: 2rpx solid #246ef9;
			border-radius: 30rpx;
			color: #246ef9;
			font-size: 28rpx;
			transition: all 0.3s ease;
			
			&:active {
				background: #246ef9;
				color: #fff;
				transform: scale(0.95);
			}
		}
	}
	
	// 加载中
	.loading {
		text-align: center;
		padding: 40rpx 0;
		color: #999;
		font-size: 28rpx;
	}
	
	// 没有更多数据
	.no-more {
		text-align: center;
		padding: 40rpx 0;
		color: #ccc;
		font-size: 24rpx;
	}
}
</style>
